<head>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--MD5加密-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>
</head>
<style type="text/css">
    .el-upload-list {
        margin-left: 0px !important;
    }

    .v_{{ widget.attrs.id }} {
        display: inline-block;
    }

    .v_{{ widget.attrs.id }} ul {
        margin-left: 0px;
        padding-left: 0px;
    }

    .v_{{ widget.attrs.id }} .el-upload-dragger {
        width: auto;
        height: auto;
        border: none;
    }

    em {
        color: #ff0000;
        background-color: rgba(8, 61, 0, 0);
        font-style: normal;
    }
</style>
<template id="v_{{ widget.attrs.id }}">
    <div class="v_{{ widget.attrs.id }}">
        {#        <el-button type="info" size="small" @click="copy">复制</el-button>#}
        {#        <el-button type="primary" size="small" @click="reset">手动修改</el-button>#}
        {#        <el-button type="success" size="small" @click="generate">随机生成</el-button>#}
        <input name="{{ widget.name }}" :value="value" style="display: none" type="text">
        <el-input v-model="value" placeholder="请设置密码" :maxlength="lenMax" :minlength="lenMin" show-word-limit
                  show-password clearable size="small" width="200" step="0" validate-event="true">
            <el-button slot="prepend" @click="generate" type="success">随机生成</el-button>
            {#            <el-button slot="append" @click="reset" type="primary" icon="el-icon-edit">手动修改</el-button>#}
            <el-button slot="append" @click="copy" type="info" icon="el-icon-document-copy">复制</el-button>
        </el-input>
    </div>
</template>
<script type="text/javascript">
    var app_{{ widget.name }} = new Vue({
        el: '#v_{{ widget.attrs.id }}',
        data: {
            value: {% if widget.value is None %}''
            {% endif %}{% if widget.value is not None %}'{{ widget.value }}'{% endif %},
            lenMin: {% if widget.attrs.lenMin is None %}8
            {% endif %}{% if widget.attrs.lenMin is not None %}{{ widget.attrs.lenMin }}{% endif %},
            lenMax: {% if widget.attrs.lenMax is None %}16
            {% endif %}{% if widget.attrs.lenMax is not None %}{{ widget.attrs.lenMax }}{% endif %},
            pwdPattern: '{{ widget.attrs.pattern }}'
        },
        methods: {
            reset() {
                let _this = this;
                this.$prompt('请输入新的密码', '密码重置', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    inputPattern: /.{8,16}/,
                    inputErrorMessage: '密码格式不正确'
                }).then(({value}) => {
                    this.$message({
                        type: 'success',
                        message: '重置成功，请及时点击保存，否则重置将无效！'
                    });
                    this.value = value;
                    {% if widget.attrs.encryptByMd5 %}
                        //进行MD5加密，再放到form表单中
                        this.value = md5(value);
                    {% endif %}
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '密码重置被取消'
                    });
                });
            },

            generate() {
                this.value = '';
                let len = Math.ceil((this.lenMax + this.lenMin) / 2);
                for (let i = 0; i < len; i++) {
                    let x = Math.floor(Math.random() * this.pwdPattern.length);
                    this.value += this.pwdPattern[x];
                }
                {% if widget.attrs.encryptByMd5 %}
                        //进行MD5加密，再放到form表单中
                        this.value = md5(this.value);
                {% endif %}
            },
            copy() {
                if (this.value === ''||this.value ===undefined){
                     this.$message({
                        type: 'warn',
                        message: '密码是空的'
                    });
                }else{
                    copyStr(this.value)
                     this.$message({
                        type: 'success',
                        message: '复制成功！'
                    });
                }
            }
        },
    });

    function copyStr(str) {
        var oInput = document.createElement('input');
        oInput.value = str;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display = 'none';
    }
</script>